<template>
  <div class="app-container">
    <div class="content-step">
        <div class="step">
          <el-steps :active="active" finish-status="success">
            <el-step title="输入域名"></el-step>
            <el-step title="域名解析"></el-step>
            <el-step title="步骤三"></el-step>
        </el-steps>
        </div>
    </div>
    <div class="container">
      <el-button style="margin-top:30px" type="success" icon="el-icon-check" circle></el-button>
      <div class="container-title">绑定成功</div>
      <div class="title">管理员正在为你的域名激活SSL安全证书，根据域名服务商不同，
        <br>最快加密时间10分钟，最晚不超过24小时</div>
        <div class="container-table">
            <el-table :data="DNSBind ? DNSBind.dnsRecords: []" style="width: 100%">
              <el-table-column
                label="域名">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.recordHost + '.' + scope.row.rootDomain}}</span>
                </template>
              </el-table-column>
              <el-table-column label="状态">
                  <el-tag size="medium">已绑定</el-tag>
              </el-table-column>
            </el-table>
        </div>
        <div class="title">输入你想要连接的域名</div>
  </div>
  <div class="btn">
      <el-button type="primary" @click="handleNext">完成</el-button>
    </div>
  </div>
</template>

<script>

import axios from 'axios';
import {mapGetters} from 'vuex';

export default {
    name: 'domain-name-add',
    data () {
        return {
            DNSBind: this.$route.query.DNSBind,
            settingVisible: false,
            active: 3
        };
    },
    methods: {
        handleNext () {
            this.$router.push({name: 'domain-name'});
            this.$store.dispatch('CLEAR_FRONT_CACHE');
        }
    },
    computed: {
        ...mapGetters(['siteList']),
        siteInfo () {
            let info = this.siteList.find(res => res.id === Number(this.siteId));
            return info;
        },
        userId () {
            return this.$store.state.user.userId;
        }
    }
};
</script>

<style lang="scss" scoped>
.btn{
   margin: 30px;
  padding: 30px;
  display: flex;
  align-content: center;
  justify-content: center;
  // justify-content:flex-end;
}
.content-step{
  display: -webkit-box;
 -webkit-box-pack: center;
  justify-content: center;
  margin: 20px 30px 20px 30px;
}
.step{
  height: 100%;
  width: 60%;
}
.container {
  height: 400px;
  margin: 30px;
  display: flex;
  flex-direction: column;
  line-height: 30px;
  align-items: center;
  background-color: #ffffff;
}
.container-title{
    padding: 20px 0 10px 0;
  font-size: 18px;
  font-weight: 500;
  color:#30344f
}
.title{
  font-size: 16px;
  color:#7e849c;
}
.container-table{
  margin: 10px 0 30px 0;
  height: 30px;
  width: 450px;
}
.content{
    margin: 15px 0 0 30px;
}
</style>
